<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div v-text="poss"></div>
    <div v-text="add"></div>
    <div id="gd-map"></div>
    <div>测试自己的分支</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      poss: {},
      msg: 'Welcome to Your Vue.js App',
      add: '',
    };
  },
  mounted() {
    let that = this;
    // getCurrentPosition(成功时的回调函数，错误时的回调函数，可选的配置对象);
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        console.log('获取位置信息成功：', pos.coords);
        // 1.重新赋值
        // this.poss = {
        //   longitude: pos.coords.longitude,
        //   latitude: pos.coords.latitude,
        // };
        // 逆地理编码：通过经玮度获取位置信息
        AMap.plugin('AMap.Geocoder', function () {
          var geocoder = new AMap.Geocoder({
            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            city: '',
          });
          var lnglat = [pos.coords.longitude, pos.coords.latitude];
          // var lnglat = [91.6, 29.4]; // 布达拉宫大概位置
          console.log('经玮度是：', lnglat);
          geocoder.getAddress(lnglat, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              // result为对应的地理位置详细信息
              console.log('您所在的位置是：', result);
              that.add = result.regeocode.formattedAddress;
            }
            console.log('逆地理编码的结果：', result);
          });
        });

        // let map = new AMap.Map('gd-map', {
        //   zoom: 15,
        //   center: [pos.coords.longitude, pos.coords.latitude],
        // });
        // 2.对已存在的属性赋值
        // this.poss.longitude = pos.coords.longitude;
        // this.poss.latitude = pos.coords.latitude;
        // 布达拉宫 91.6 ，29.4
      },
      (err) => {
        console.log('位置信息失败：', err);
      }
    );
  },
  methods: {},
  watch: {
    poss(val) {
      console.log('poss的值发生变化:', val);
    },
    // poss: {
    //   hanlder: function (val) {
    //     console.log('poss的值发生变化:', val);
    //   },
    //   deep: true,
    // },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#gd-map {
  width: 100%;
  height: 300px;
}
</style>
